<template>
  <div class="app-login">
    <a-form ref="formRef" class="app-login-form" :model="formData">
      <h1>商城管理系统</h1>
      <a-form-item>
        <a-input
          ref="userNameInput"
          v-model:value="formData.name"
          size="large"
          placeholder="账户: admin"
        >
          <template #prefix>
            <UserOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input-password v-model:value="formData.password" size="large" placeholder="密码: admin">
          <template #prefix>
            <LockOutlined />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item>
        <a-input v-model:value="formData.imgCode" class="login-code-input" size="large" />
        <img class="app-code-img" :src="formData.imgSrc" alt="" @click="refreshCode" />
      </a-form-item>
      <a-form-item style="margin-top: 24px">
        <a-button
          block
          size="large"
          type="primary"
          :loading="formData.loading"
          html-type="submit"
          class="login-button"
          @click="onLogin"
          >确定
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, unref, toRaw } from 'vue'
// import { useStore } from 'vuex'
import { useStore } from '@/store'
import { useRouter } from 'vue-router'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useMessage } from '@/hooks/common/useMessage'
import { fetchLoginImg } from '@/api/system/user'

export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
  },
  setup() {
    const router = useRouter()
    const store = useStore()
    const { message } = useMessage()
    const formRef = ref<any>(null)
    const formData = reactive({
      name: 'admin',
      password: 'admin',
      imgSrc: '',
      imgId: '',
      loading: false,
    })

    const getCodeImg = () => {
      fetchLoginImg().then((res) => {
        formData.imgSrc = res.imgBase64
        formData.imgId = res.imgId
      })
    }

    getCodeImg()

    const onLogin = async () => {
      const form = unref(formRef)

      form
        .validate()
        .then(() => {
          formData.loading = true
          store
            .dispatch('user/login', toRaw(formData))
            .then((res) => {
              if (res.code) {
                message.success(res.message)
                formData.loading = false
                return
              } else {
                router.push('/')
                // 延迟 1 秒显示欢迎信息
                setTimeout(() => {
                  message.success('Hi, 欢迎回来')
                }, 1000)
              }
            })
            .catch(() => {
              formData.loading = false
            })
        })
        .catch((error) => {
          console.log('error', error)
        })
    }

    const refreshCode = () => {
      getCodeImg()
    }

    return {
      formRef,
      formData,
      onLogin,
      refreshCode,
    }
  },
})
</script>

<style lang="scss">
body {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/login.svg');
  background-size: 100%;
}
.app-code-img {
  height: 40px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.login-code-input {
  width: 322px;
  vertical-align: middle;
}
.app-login {
  position: absolute;
  top: 25%;
  width: 100%;
  display: flex;
  justify-content: center;
  .app-login-form {
    width: 400px;
    .ant-row {
      display: block;
    }
    h1 {
      font-size: 26px;
      color: rgba(0, 0, 0, 0.85);
      margin: 0 auto 40px auto;
      text-align: center;
      font-weight: 700;
    }
  }
}
</style>
